<template>
    <div class="login" clearfix>
        <div class="login-wrap">
            <el-row type="flex" justify="center">
                <el-form ref="userForm" :model="userForm" :rules="rules" status-icon label-width="80px">
                    <h3>登录</h3>
                    <hr>
                    <el-form-item prop="username" label="用户名">
                        <el-input v-model="userForm.username" placeholder="请输入用户名" prefix-icon clearable></el-input>
                    </el-form-item>
                    <el-form-item id="password" prop="password" label="密码">
                        <el-input v-model="userForm.password" show-password placeholder="请输入密码" clearable></el-input>
                    </el-form-item>
                    <div class="link-with" style="height: 40px;">
                        <!--            <router-link to="/findPass" class="link-with-underline">找回密码</router-link>-->
                        <!--            <router-link to="/register" class="link-with-underline">注册账号</router-link>-->
                    </div>


                    <el-form-item>
                        <div class="link-with">
                            <el-button type="primary" plain @click="doLogin()">登 录</el-button>
                            <router-link to="/UserRegister" class="link-with-underline">注册账号</router-link>
                        </div>
                    </el-form-item>
                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
import axios from "axios";
import {mapMutations, mapState} from "vuex";

export default {
    name: "UserLogin",
    data() {
        return {
            userForm: {
                username: "",
                password: ""
            },
            rules: {
                username: [
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                ],
                password: [
                    {required: true, message: '请输入新密码', trigger: 'blur'},
                ],
            }
        };
    },
    computed: {
        ...mapState({
            user: state => state.user
        }),
    },
    // watch:{
    //   user(newVal, oldVal) {
    //     console.log("user", newVal);
    //     if (newVal.userId) {
    //       // this.$router.push({ path: "/home" });
    //     }
    //   }
    // },
    created() {

    },
    methods: {
        doLogin() {
            this.$refs.userForm.validate((valid) => {
                if (valid) {
                    // 校验通过提交。
                    this.login();
                }
            });
        },
        // 登录
        login(){
            let data = {
                username: this.userForm.username,
                password: this.userForm.password
            }
            //校验用户名和密码是否正确;
            this.$store.dispatch('userLogin', data).then(res => {
                // console.log("res.data11111111111111111 =====>", res);
                if (res !== undefined && res.resultStatus === true) {
                    // console.log("res.resultData", res.resultData);
                    // this.$message.success(res.resultData);
                    this.$message.success("登录成功！");
                    this.$router.push({path: "/Home"});
                } else if (res !== undefined && res.resultStatus === false) {
                    // console.log("res.resultData", res.resultData);
                    this.$message.error(res.errorMessage + "！", res.resultData);
                }
            }).catch(res => {
                this.$message.error("用户名或密码错误或该用户被封禁！");
            });
        },

    }
};
</script>

<style scoped>
.login {
    width: 100%;
    height: 100%;
    background-image: url("~@/assets/userbackground.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    background-position: center center; /* 图片居中显示 */
}

.login-wrap {
    background: rgba(255, 255, 255, 0.8);
    background-size: cover;
    width: 400px;
    height: 100%;
    margin: 230px auto;
    overflow: hidden;
    padding-top: 10px;
    line-height: 40px;

}

#password {
    margin-bottom: 5px;
}

h3 {
    color: #0babeab8;
    font-size: 24px;
}

hr {
    background-color: #444;
    margin: 20px auto;
}

a {
    text-decoration: none;
    color: #aaa;
    font-size: 15px;
}

a:hover {
    color: coral;
}

.el-button {
    width: 60%;
    margin-left: -30%;

}

.link-with {
    display: flex;
    justify-content: space-evenly;
}

.link-with-underline {
    text-decoration: underline;
    color: #2c3e50;
    /* 其他样式，如颜色、字体大小等 */
}
</style>